<template>
	<view class="Information">
		<view class="individual">

			<image :src="userStore.userInfo?.avatar" mode=""></image>
			<view style="display: flex; flex-direction: column;">
				<text class="name">{{userStore.userInfo?.name?userStore.userInfo?.name:'未实名'}}</text>
				<text v-if="!userStore.userInfo?.name"
					style="text-decoration:underline;display: inline-block;margin-left: 25rpx;"
					@click="toNewRecord">前往实名</text>
				<text v-else>{{userStore.userInfo?.gender?'男 28':'女 26' }}</text>
			</view>

			<view class="tag">
				<uni-tag text="本人" type="error" />
			</view>
			<view class="tag" v-if="signData">
				<uni-tag text="已签约" type="success" />
			</view>
			<view class="tag" style="margin-left: 20rpx;" v-else>
				<uni-tag text="未签约" type="warning" />
			</view>
		</view>
		<view class="footer">
			<button type="default" size="mini" @click="openRelation" plain>切换家庭成员</button>
		</view>

	</view>
	<uni-popup ref="relationRef" type="bottom" border-radius="100px 100px 0 0" style="text-align: center;">
		<view class="pop-content">
			<view class="pop-title">请选择签约人 </view>
			<view class="" style="margin-bottom: 18rpx;">
				<scroll-view :scroll-y="true" style="max-height: 500rpx;">
					<view class="pop-item" v-if="!relationData.length" @click="addRelation">前往添加家庭成员</view>
					<view class="pop-item" v-for="item in relationData" :key="item._id"
						@click="chooseRelation(item.otherId.phone)">
						{{item.otherId.name}}
					</view>
				</scroll-view>
			</view>
			<view class="pop-floor" @click="closeRelation">取消</view>
		</view>
	</uni-popup>

	<!-- 确认切换家人 -->
	<uni-popup ref="checkRef" type="center" border-radius="100px 100px 0 0" style="text-align: center;">
		<view class="pop-center">
			<view class="pop-tip">
				即将前往登录，确认切换签约账号吗？
			</view>
			<view class="pop-done">
				<view style="color: #999;" @click="closeCheck">取消</view>
				<view style="color: #2984f8;" @click="chooCheck">确认</view>
			</view>
		</view>
	</uni-popup>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useUserStore
	} from '../../store/user';
	import {
		getFamilyApi
	} from '../../api/teamDoctor';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		findSignApi,
		getSignIdApi
	} from '../../api/sign';
	const popupRef = ref(null)
	const open = () => {
		popupRef.value?.open()
	}

	const relationRef = ref(null)
	const checkRef = ref(null)

	onLoad(() => {
		getRelation()
		getSign()
	})

	// 前往添加家庭成员
	function addRelation() {
		relationRef.value.close()
		uni.navigateTo({
			url: '/minePackage/pages/family-add/family-add'
		})
	}

	// 前往实名
	function toNewRecord() {
		uni.navigateTo({
			url: '/HealthHeadlinesPackage/pages/newHealthRecord/newHealthRecord'
		})
	}

	const signData = ref(0)
	// 判断是否签约
	function getSign() {
		findSignApi({
				residentId: userStore.userInfo?._id
			})
			.then(res => {
				if (res.code == 200) {
					signData.value = res.data.rows?.filter(item => item.state == 3)?.length
					console.log(111, signData.value);
				}
			})
	}

	const userStore = useUserStore()
	const relationData = ref([])

	// 获取亲属关系
	function getRelation() {
		getFamilyApi({
				ownId: userStore.userInfo?._id
			})
			.then(res => {
				if (res.code == 200) {
					relationData.value = res.data
				}
			})
	}

	// 当前关系
	const nowRelation = ref('')

	// 打开关系选择
	function openRelation() {
		getRelation()
		relationRef.value.open()
	}
	// 打开确认关系
	function openCheck() {
		checkRef.value.open()
	}
	// 点击确认
	function chooCheck(data) {
		uni.removeStorageSync(
			'user_token'
		)
		closeRelation()
		uni.navigateTo({
			url: `/pages/login/login?_id=${nowRelation.value}`
		})

		checkRef.value.close()
	}

	// 取消
	function closeCheck() {
		checkRef.value.close()
	}


	// 选择关系
	function chooseRelation(data) {
		nowRelation.value = data
		openCheck()

	}

	// 取消选择
	function closeRelation() {
		relationRef.value.close()
	}
</script>

<style scoped lang="scss">
	.Information {
		width: 670rpx;
		height: 270rpx;
		background-color: rgba(41, 132, 248, 1);
		margin: 43rpx auto;
		border-radius: 12px;

		.individual {
			display: flex;
			padding-top: 20rpx;
			padding-bottom: 50rpx;

			image {
				width: 128rpx;
				height: 128rpx;
				margin: 0 20rpx;
			}

			.name {
				font-size: 48rpx;
				color: #fff;
			}

			text {
				font-size: 24rpx;
				color: #fff;
			}
		}
	}

	.footer {
		text-align: right;

		button {
			margin-right: 25rpx;
			background-color: #fff;
			color: #2984F8;
			;
			border-radius: 64rpx;
			border: none;
		}
	}

	.tag {
		.uni-tag {
			width: 72rpx;
			height: 36rpx;
			margin-left: 20rpx;
			font-size: 24rpx;
		}
	}

	.member-title {
		height: 88rpx;
		background-color: #fff;
		font-size: 24rpx;
		color: #999;
	}

	.member {
		height: 112rpx;
		background-color: #fff;
		font-size: 32rpx;
		color: #2984F8;
	}

	/* 弹出层 */

	.pop-content {
		width: 750rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: rgba(242, 242, 242, 1);
		;
	}

	.pop-title {
		height: 88rpx;
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #999;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.pop-item {
		height: 112rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #dbdbdb;
		font-size: 32rpx;
		color: #1877F2;
		background-color: #fff;
	}

	.pop-floor {
		height: 174rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 24rpx;
		background-color: #fff;
		margin-top: 10rpx;
		color: #999;
	}

	.avatar-button {
		width: 148rpx;
		height: 148rpx;
		margin: 0 auto;
		margin: 32rpx auto;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		padding: 0;
	}

	.avatar-button button {
		padding: 0;
		border: none;
	}

	// 中间弹出层
	.pop-center {
		width: 520rpx;
		height: 352rpx;
		background-color: #fff;
	}

	.pop-tip {
		height: 264rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		line-height: 56rpx;
		color: #333;
	}

	.pop-done {
		height: 88rpx;
		border-top: 1px solid #e6e6e6;
		display: flex;
	}

	.pop-done view {
		height: 88rpx;
		width: 260rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}
</style>